import React from 'react';
import { Modal, Button, Form, Input } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;

@connect(({ login }) => ({
  login,
}))
class List extends React.Component {
  state = {
      visible: false,
  }


  showModal = () => {
    this.setState({ visible: true });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }

  handleOk = () => {
    const { dispatch, form: { validateFields } } = this.props;
    validateFields( async  (err, values) => {
      if (!err) {
        await dispatch({
          type: 'login/login',
          payload: values
        })

        // 重置 `visible` 属性为 false 以关闭对话框
        this.setState({ visible: false });
      }
    });
  }



  render() {
    const { form: { getFieldDecorator } } = this.props;
    const { visible  } = this.state;

    return (
      <div>
        <Button onClick={this.showModal}>登录</Button>

        <Modal title="登录"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form >
            <FormItem label="用户名">
              {getFieldDecorator('login', {
                /*  rules: [{ required: true }], */
                //initialValue: 'admin@comp1',
                initialValue: 'admin',
              })(
                <Input />
              )}
            </FormItem>
            <FormItem label="密码">
              {getFieldDecorator('password', {
                /*  rules: [{ required: true }], */
                initialValue: '123',
              })(
                <Input />
              )}
            </FormItem>
          </Form>
        </Modal>

      </div>
    );
  }
}

export default Form.create()(List);





